<template>
	<div class="root">
		<div class="header">
			<!-- <a :href="testUrl" v-if='test'><i class="iconfont icon-zuo" style="flex: 0.2"></i></a> -->
			<a :href="formalUrl"><i class="iconfont icon-zuo" style="flex: 0.2"></i></a>
			<span>已报名人信息</span>
		</div>
		<div class="searchbox">
			<van-search
			  v-model="search"
			  shape="round"
			  background="#42b574"
			  placeholder="请输入姓名关键词"
				@search="onSearch"
				@cancel="onCancel"
			/>
		</div>
		<div class="useritem" style="border: none;">
			<div class="group"></div>
			<div class="name"></div>
		</div>
		<van-list
		  v-model="loading"
		  :finished="finished"
		  finished-text="没有更多了"
		  @load="getUsers"
			:error.sync="error"
			error-text="请求失败，点击重新加载"
		>
		  <div class="useritem" v-for="(item,index) in userList" :key="index">
		  	<div class="group">{{item.group}}{{item.type}}</div>
		  	<div class="name">{{item.name}}</div>
		  </div>
		</van-list>
		<!-- <div class="loadmore" @click="getUsers">加载更多</div> -->
	</div>
</template>

<script>
import {HOST} from "../../../main.js"
export default{
	data(){
		return{
			userList:[],
			page:1,
			search:'',
			error:false,
			loading:false,
			finished:false,
			test:false//是否为测试服
		}
	},
	created() {
		console.log(HOST);
		this.getUsers()
		// http://tennis.laigl.com/mobile/?code=031CN0Ga1JCUjA0k3gHa1bIhOZ1CN0G6&state=1#/
		let herf = window.location.href
			// /match/apply?id=406
			this.formalUrl = HOST+'mobile/#/match/apply?id='+this.$route.query.com_id
	
		setTimeout(()=>{
			console.log(this.getlist)
		},500)
	},
	methods:{
		// 获取已报名人员信息
		getUsers(){
			this.loading=true
			this.$axios.post('mobile/matching/get_com_sign',
			{
				com_id:this.$route.query.com_id,
				page:this.page,
				search:this.search,
			})
			.then(res=>{
				this.loading=false
				let data = res.data.data
				if(res.data.code==2000){
					if(data==''){
						this.finished = true
					}else{
						this.finished = false
					}
					if(this.userList==''){
						this.finished = false
						this.userList = data
					}else{
						this.finished = false
						this.userList = this.userList.concat(data)
					}
					console.log(this.userList)
					this.page++
				}else{
					this.finished = true
				}
			})
			.catch(err=>{
				console.log(err)
			})
		},
		// 搜索
		onSearch(){
			this.page = 1
			this.userList = []
			this.getUsers()
		},
		//取消
		onCancel(){
			this.search = ''
			console.log('取消')
		}
	}
}
</script>

<style scoped lang="less">
.van-list{
	margin-top: 0.9rem;
}
.header{
	width: 100%;
	height: 0.9rem;
	font-size: 0.36rem;
	line-height: 0.9rem;
	display: flex;
	justify-content: space-between;
	box-shadow: 0 0.01rem 0.02rem #aaa;
	position: fixed;
	top: 0;
	z-index: 9999;
	background:#fff;
	a{
		color: #000;
		padding-left: 0.5rem;
		i{
			display: inline-block;
		}
	}
	span{
		flex: 1;
		float: right;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	img{
		width: 35px;
		height: 35px;
		margin-top: 5px;
		margin-right: 5%;
	}
}
.root{
	.useritem{
		width: calc(100%-30px);
		height: 50px;
		margin: 0 15px;
		border-bottom: 1px dashed #666;
		display: flex;
		padding: 0 10px;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
		.group{
			width: 50%;
			text-align:left;
		}
		.name{
			width: 50%;
			text-align:right;
		}
	}
	.loadmore{
		width: 100%;
		margin-top: 10px;
	}
	.searchbox{
		position: fixed;
		top: 0.9rem;
		width: 100%;
		margin-bottom: 0.9rem;
	}
}
</style>
